<template>
  <div>
    <Header :contentTitle="headerTitle"></Header>
    <div class="home-study-wrapper">
      <scroller>
        <div class="home">
          <div class="home-detail">
            <div class="title">
              <h2>{{ actDetails.title }}</h2>
              <span>{{ actDetails.createTime ? new Date(actDetails.createTime).format('yyyy-MM-dd hh:mm') : '' }}发布</span>
            </div>
            <div class="article-box">
              <!-- <img :src="actDetails.cover" alt="" class="article-img"> -->
              <div class="content" v-html="actDetails.content"></div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import Header from '~/components/topHeader'
import { format } from '~/plugins/filter'
import { queryResearchInfoById, queryResearchPolicyById } from '~/api/identity'
export default {
  components: {
    Header,
  },
  data() {
    return {
      actDetails: [],
      headerTitle: '资讯详情',
    }
  },
  mounted() {
    this.$visit(this.$route.path + '/' + this.$route.query.id)
    if (this.$route.query.type === 'policy') {
      this.headerTitle = '政策资讯'
      this.queryResearchPolicyById()
    } else {
      this.getActDetail()
    }
  },
  methods: {
    getActDetail() {
      this.$loading('open')
      queryResearchInfoById(this.$route.query.id)
        .then((res) => {
          this.actDetails = res.data

          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    queryResearchPolicyById() {
      this.$loading('open')
      queryResearchPolicyById(this.$route.query.id)
        .then((res) => {
          this.actDetails = res.data
          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
  },
}
</script>

<style scoped lang="less">
.home-study-wrapper {
  width: 100%;
  height: 100vh;
  margin-top: -0.88rem;
  background: #fff;
  .home {
    width: 100%;
    height: auto;
    background: #fff;
    padding-top: 0.88rem;
    box-sizing: border-box;
    //   background: red;
  }
}

.home-detail {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;

  .title {
    padding: 0.3rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(229, 232, 237, 1);
    h2 {
      font-size: 0.4rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.6rem;
    }
    span {
      display: block;
      font-size: 0.26rem;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(187, 187, 187, 1);
      line-height: 0.3rem;
      margin-top: 0.3rem;
    }
  }
  .article-box {
    padding: 0.3rem 0;
    box-sizing: border-box;
    .article-img {
      width: 100%;
      height: 4rem;
    }
  }
}
</style>
